<template>
	<view class="page">
		<view class="header">
			<view class="header-bg"></view>
			<text class="title" :style="{'margin-top': menuButtonInfo.top + 'px', 'height': menuButtonInfo.height + 'px'}">{{title}}</text>
			<view @click="onInfoClick" class="info linear-horizontal flex-align-center">
				<image class="avatar" :src="avatar"></image>
				<view class="linear-vertical flex-1 margin-left-10">
					<text class="username">{{user.name}}</text>
					<view class="phone linear-horizontal flex-align-center">
						<image class="size-14" src="/static/images/icon_phone.png"></image>
						<text class="margin-left-5">电话：{{user.phoneNumber}}</text>
					</view>
					<text class="org">部门：{{user.companyName}}</text>
				</view>
				<image class="size-14" src="/static/images/item_arrow.png"></image>
			</view>
			<view @click="onSettingClick" class="menu linear-horizontal flex-align-center">
				<image class="size-16" src="/static/images/icon_setting_black.png"></image>
				<text class="flex-1 margin-left-10">修改密码</text>
				<image class="size-14" src="/static/images/item_arrow.png"></image>
			</view>
			<view @click="onServiceClick" class="menu linear-horizontal flex-align-center">
				<image class="size-16" src="/static/images/icon_service.png"></image>
				<text class="flex-1 margin-left-10">联系客服</text>
				<image class="size-14" src="/static/images/item_arrow.png"></image>
			</view>
			<view class="menu linear-horizontal flex-align-center">
				<image class="size-16" src="/static/images/icon_logout.png"></image>
				<text @click="onLogoutClick" class="flex-1 margin-left-10">退出登录</text>
				<image class="size-14" src="/static/images/item_arrow.png"></image>
			</view>
		</view>
		<view class="agreement" :style="{'bottom': agreenmentBottom + 'px'}">
			<text @click="onUserAgreement">《用户协议》</text>
			<text style="color: #333333;">和</text>
			<text @click="onPrivacyAgreement">《隐私协议》</text>
		</view>
		<tabbar name="mine"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				photoUrl: this.config.photoUrl,
				title: '',
				menuButtonInfo: {},
				pageHeight: 0,
				agreenmentBottom: 0,
				user: {},
				avatar: '/static/images/avatar.png'
			}
		},
		mounted() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			let sys = uni.getSystemInfoSync()
			this.pageHeight = sys.screenHeight - parseInt(uni.getStorageSync("safeAreaBottomHeight"))
			this.agreenmentBottom = parseInt(uni.getStorageSync("safeAreaBottomHeight")) + 65
			this.updateUI()
			setTimeout(() => {
				this.title = '个人中心'
			}, 300)
		},
		methods: {
			updateUI(){
				this.user = uni.getStorageSync("user")
				if(this.user.photo){
					this.avatar = this.photoUrl + this.user.photo
				}
			},
			onSettingClick(){
				uni.navigateTo({
					url: "/pages/mine/modifyPwd"
				})
			},
			onServiceClick(){
				uni.previewImage({
					current: 0,
					urls: ['/static/images/qrcode.png'],
					success(res){
						console.log(res);
					},
					fail(err) {
					  console.log(err);
					}
				})
			},
			onLogoutClick(){
				uni.setStorageSync("token", "")
				uni.reLaunch({
					url: "/pages/login/login"
				})
			},
			onUserAgreement(){
				uni.navigateTo({
					url: "/pages/web/web?title=用户协议&url=" + encodeURI(this.config.userAgreementUrl)
				})
			},
			onPrivacyAgreement(){
				uni.navigateTo({
					url: "/pages/web/web?title=隐私协议&url=" + encodeURI(this.config.privacyAgreementUrl)
				})
			},
			onInfoClick(){
				uni.navigateTo({
					url: "/pages/mine/userinfo"
				})
			}
		}
	}
</script>

<style>
	.page{
		width: 100%;
		position: relative;
		box-sizing: border-box;
	}
	
	.header{
		position: absolute;
		width: 100vw;
	}
	
	.header-bg{
		position: absolute;
		width: 100vw;
		height: 138.5px;
		background: linear-gradient(to bottom, rgba(47,127,240, 0.4), rgba(255, 255, 255, 0));
	}
	
	.title{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 38rpx;
		color: #18191A;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.info{
		margin: 30px 15px;
	}
	
	.avatar{
		width: 70px;
		height: 70px;
		border-radius: 99px;
	}
	
	.username{
		font-size: 18px;
		color: #18191A;
		font-weight: 600;
	}
	
	.phone{
		font-size: 12px;
		color: #5C6166;
		margin: 5px 0;
	}
	
	.org{
		font-size: 12px;
		color: #18191A;
	}
	
	.menu{
		width: 750rpx;
		height: 44px;
		box-sizing: border-box;
		padding: 0 15px;
		font-size: 15px;
		color: #000000;
	}
	
	.agreement{
		position: absolute;
		left: 0;
		right: 0;
		color: #317EF1;
		font-size: 14px;
		text-align: center;
	}
</style>
